
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .header{
        position: absolute;
      }
    </style>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <div id="root"></div>
    
</body>
<script>
  const directives = {
    focus: {
      mounted(el){
        el.focus()
      }
    },
    test: {
      mounted(el, v){
        console.log("v=", v.value)
        el.value = v.value
      }
    },
    pos: {
      mounted(el, v){
        console.log(v.arg)
        el.style[v.arg] = v.value + 'px'
      },
      updated(el, v) {
        el.style.top = v.value + 'px'
      },
    }
  }

  const app = Vue.createApp({
    // mounted(){
    //   console.log(this.$refs.inputRef.focus())
    // },
      directives:directives,
      data(){
          return {
           distance: 100
          }
      },
      methods:{
        
      },
      template:
      ` 
      <div>
        <input v-focus v-test='100' v-pos:right='distance' class='header'/>
        </div>
      `
  });

  app.component('demo', {
      template:
        `
          
      `
  });

  // app.directive('focus', {
  //   mounted(el){
  //     console.log(el.focus())
  //   }
  // })

  const vm = app.mount("#root");
</script>
</html>